<template>
  <float-bottom>
    <view class="h-full flex items-center px-4">
      <view class="flex gap-x-4">
        <icon-box name="/static/images/home.png" size="36rpx" text="首页" text-class="text-base text-[20rpx]"
          @click="to('index/index')"></icon-box>
        <icon-box name="/static/images/car.png" size="36rpx" text="购物车" text-class="text-base text-[20rpx]"
          @click="to('car/car')"></icon-box>
      </view>
      <view class="flex-1  ml-[20rpx] flex gap-x-[20rpx]">
        <wd-button :disabled="disabled" :round="false" :block="true" plain custom-class="flex-1"
          @click="emit('addCar')">加入购物车</wd-button>
        <wd-button :disabled="disabled" :round="false" :block="true" type="primary" custom-class="flex-1"
          @click="emit('buy')">{{ buyText }}</wd-button>
      </view>
    </view>
  </float-bottom>
</template>
<script setup>
import { computed } from "vue";
import { to } from "@/utils/navigation";
const emit = defineEmits(["addCar", "buy"]);

const props = defineProps({
  status: {
    type: [Number, String],
    default: 1
  }
});

const disabled = computed(() => {
  return props.status > 1
})
const buyText = computed(() => {
  const status = props.status
  const maps = {
    1: '立即购买',
    2: '无需购买',
    3: '已购买'
  }

  return maps[status] || '立即购买'
})

</script>
<style lang="scss" scoped></style>
